<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Demo</title>

  <!-- jQuery / jQuery UI -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

  <!-- jQuery Touch Punch - Enable Touch Drag and Drop -->
  <script src="../core/vendor/jquery.touch-punch.min.js"></script>

  <!-- jQuery.Shapeshift -->
  <script src="../core/jquery.shapeshift.js"></script>

  <!-- CSS -->
  <style>
    .container {
      border: 1px dashed #CCC;
      position: relative;
    }

    .container > div {
      background: #AAA;
      position: absolute;
      height: 100px;
      width: 100px;
      color: white;
      font-size:75px;
      line-height: 100px;
      text-indent: 30px;
      font-family: sans-serif;
    }

    .container > .ss-placeholder-child {
      background: transparent;
      border: 1px dashed blue;
    }

  </style>

  <!-- Javascript -->
  <script>
    $(document).ready(function() {
      $(".container").shapeshift();
      setInterval(shuffle, 3000);
    })

    function shuffle() {  
      $(".container").trigger('ss-shuffle');
    }
  </script>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</body>
</html>